body {
    margin: 0px;
    padding: 0px;
    border: 0px;

    width: 100%;
    height: 100%;
    background-color: green;
}

.container {
    font-size: 6px;

    width: 80%;

    margin-left: auto;
    margin-right: auto;
    margin-top: 8%;

    .load {
        overflow: hidden;

        border: 2px solid grey;
        width: 20%;
        float: left;
        margin-left: 2%;
        height: 30%;

        &.load1 {
            position: relative;

            .loader, .loader:before, .loader:after {
                position: absolute;
                left: 50%;
                top:30%;
                vertical-align: middle;
                width: 1em;
                height: 1em;
                border-radius: 50%;


                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                -webkit-animation: load1 1.8s infinite ease-in-out;
                animation: load1 1.8s infinite ease-in-out;
            }

            .loader{
                text-indent: -9999px;
                -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
            }
            .loader:before{
                top: 0;
                content: "#";
                left: -3em;
            }
            .loader:after{
                top: 0;
                content: "#";
                left: 3em;
                -webkit-animation-delay: 0.6s;
                animation-delay: 0.6s;
            }
        }

        &.load2{
            .loader{
                font-size: 20px;
                margin: 45% auto;
                width: 1em;
                height: 1em;
                border-radius: 50%;
                position: relative;
                text-indent: -9999em;
                -webkit-animation: load2 1.3s infinite linear;
                animation: load2 1.3s infinite linear;
            }
        }

        &.load3{
            position: relative;
            .loader{
                margin: auto;
                margin-top: 25%;
                text-indent: -9999;
                border: 1.1em solid rgba(255, 255, 255, 0.2);
                border-left: 1.1em solid #ffffff;

                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                -webkit-animation: load3 0.8s infinite ease-in-out;
                animation: load3 0.8s infinite ease-in-out;
            }
            .loader,.loader:after{
                border-radius: 50%;
                width: 5em;
                height: 5em;
            }
        }

        &.load4{
            position: relative;
            .loader{
                border-radius: 50%;
                font-size: 11px;
                text-indent: -99999em;
                margin: 25% auto;
                position: relative;
                width: 8em;
                height: 8em;
                box-shadow: inset 0 0 0 1em #FFF;
            }
            .loader:before{
                content: "";
                border-radius: 8.1em 0 0 8.1em;
                position: absolute;
                left: -0.1em;

                background: green;
                width: 4.1em;
                height: 8.1em;
                -webkit-transform-origin: 4em 4em;
                transform-origin: 4em 4em;
                -webkit-animation: load4 2s infinite ease 1.5s;
                animation: load4 2s infinite ease 1.5s;
            }
            .loader:after{
                content: "";
                border-radius: 50%;
                background: green;
                position: absolute;
                left: 4em;

                width: 4.2em;
                height: 8.2em;
                border-radius: 0 8em 8em 0;

                -webkit-transform-origin: 0px 4em;
                transform-origin: 0px 4em;
                -webkit-animation: load4 2s infinite ease;
                animation: load4 2s infinite ease;
            }
        }

        &.load5{
            position: relative;
            .dotting{
                position: absolute;
                border-radius: 50%;
                font-size: 11px;
                text-indent: -99999em;
                width: 0.2em;
                height: 0.2em;
                display: inline;
                top: 0.5em;


                -webkit-animation: load5 2s infinite ease;
                animation: load5 2s infinite ease;
            }
        }
    }
}

@-webkit-keyframes load1 {
    0%,80%,100%{
        box-shadow: 0 2.5em 0 -1.3em #ffffff;
    }
    40%{
        box-shadow: 0 2.5em 0 0 #FFF;
    }

}
@-webkit-keyframes load2 {
    0%,
    100% {
        box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em
        0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em
        0 0em #ffffff;
    }
    12.5% {
        box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em
        0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
    }
    25% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em
        0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
    }
    37.5% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,
        -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em
        #ffffff;
    }
    50% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0
-0.5em #ffffff;
    }
    62.5% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em
        #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0
-0.5em #ffffff;
    }
    75% {
        box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,
        3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0
        0em #ffffff;
    }
    87.5% {
        box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em
        0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em
        #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0
        0.2em #ffffff;
    }
}
@-webkit-keyframes load3 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@-webkit-keyframes load4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes load5 {
    0%,100% {
        box-shadow: 1em 0 0 0 green,2em 0 0 0 green,3em 0 0 0 green;
    }
    30% {
        box-shadow: 1em 0 0 0 #ffffff,2em 0 0 0 green,3em 0 0 0 green;
    }
    60% {
        box-shadow: 1em 0 0 0 #ffffff,2em 0 0 0 #ffffff,3em 0 0 0 green;
    }
    98% {
        box-shadow: 1em 0 0 0 #ffffff,2em 0 0 0 #ffffff,3em 0 0 0 #ffffff;
    }
}